<template>
  <div class="subMenu">
    <div v-for="router of sideMenu" :key="router.name">
      <!-- 二级导航 -->
      <el-submenu
        index="1"
        v-if="router.children && router.children.length > 0"
      >
        <template slot="title">
          <i :class="router.meta.icon"></i>
          <span>{{ router.meta.name }}</span>
        </template>
        <el-menu-item-group>
          <sub-menu :sideMenu="router.children"></sub-menu>
        </el-menu-item-group>
      </el-submenu>

      <!-- 一级导航 -->
      <el-menu-item :index="router.meta.fullPath" v-else @click="jump(router)">
        <i :class="router.meta.icon"></i>
        <span slot="title">{{ router.meta.name }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<style scoped>
i {
  font-style: normal;
}
</style>

<script>
export default {
  name: "sub-menu",
  props: {
    sideMenu: {
      type: Array,
      require: true,
      default: () => [],
    },
  },
  methods: {
    jump(router) {
      // console.log(router.meta.icon);
      if (router.meta["fullPath"]) {
        return;
      }
      this.$router.push({ name: router.name });
    },
  },
  mounted() {
    // console.log(this.sideMenu);
  },
};
</script>
